import React, { Component } from 'react';
import { connect } from 'react-redux'
import actions from '../../store/actions'
class Index extends Component {
  handleClickCity(v)  {
    const { dispatch, history } = this.props
    const action = actions.setCity(v)
    dispatch(action)
    history.goBack()
  }
  render() {
    const { cityList, city } = this.props
    return (
      <div className="city">
        <ul>
          {
            cityList.length > 0 && cityList.map((v, i) => {
              return <li 
                key={i} 
                // 高亮
                className={ v.code === city.code ? 'active': ''  }
                onClick={ () => this.handleClickCity(v) }
                >{ v.name }</li>
            })
          }
        </ul>
      </div>
    );
  }
}

const mapState = state => {
  return {
    ...state
  }
}

const mapDiapatch = dispatch => {
  return { dispatch }
}

export default connect(mapState, mapDiapatch)(Index);

